<template>
  <el-dialog :visible.sync="dialogVisible" width="500px" title="导入科目模板">
    <div class="warn-info">
      <div>1.文件必须为xls或xlsx格式 <span @click="downloadTmp">下载模板</span></div>
      <div>2、导入相同编码会覆盖原有信息，如需更新已存在的数据，请先导出模板，在导出表格里进行修改。</div>
    </div>
    <div class="upload-wrap clearfix">
      <el-upload
        v-if="dialogVisible"
        ref="upload"
        :multiple="false"
        :limit="1"
        :show-file-list="true"
        :on-exceed="onExceed"
        :auto-upload="false"
        :on-change="beforeUpload"
        action=""
        class="upload-demo-1"
        drag
      >
        <i class="el-icon-upload"/>
        <div class="el-upload__text">将文件拖到此处（仅支持excel文件），或<em>点击上传</em></div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="okHandler">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'UploadDialog',
  data() {
    return {
      dialogVisible: false,
      file: null
    }
  },
  computed: {
    token() {
      return sessionStorage.getItem('token') || ''
    }
  },
  created() {
  },
  methods: {
    open() {
      this.dialogVisible = true
    },
    downloadTmp() {
      this.$http.get('account/subTmp/exportSubTmp', {}, { responseType: 'arraybuffer' }).then((res) => {
        this.$downloadExcel(res, '科目模板', 'xls')
      })
    },
    okHandler() {
      if (!this.file) {
        this.$message({
          type: 'warning',
          message: `请选择文件!`
        })
        return false
      }
      this.checkName()
    },
    checkName() {
      const formData = new FormData()
      // 向 formData 对象中添加文件
      formData.append('file', this.file)
      this.$http.post(`account/subTmp/addList`, formData).then((res) => {
        if (res.data && res.data.length) {
          this.$confirm(`${res.data}`, '提示', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '重新录入',
            type: 'error',
            showCancelButton: false,
            customClass: 'top-icon-msg'
          }).then(() => {
            this.$refs.upload.clearFiles()
            this.file = null
          })
        } else {
          this.$emit('ok')
          this.dialogVisible = false
        }
      })
    },
    onExceed() {
      this.$message({
        type: 'warning',
        message: `超出个数限制!`
      })
    },
    beforeUpload(file) {
      const isXls = file.name.indexOf('.xls') !== -1
      this.file = file.raw
      if (!isXls) {
        this.$message.error('仅支持excel文件!')
      }
      return isXls
    },
    onSuccess(res) {
      if (res.status) {
        this.$emit('ok', res.data)
        this.$confirm(`<div>导入科目模板成功！</div><div>${res.message}。</div>`, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '完成',
          type: 'success',
          showCancelButton: false,
          customClass: 'top-icon-msg'
        })
        this.dialogVisible = false
      } else {
        this.$confirm(`<div>导入模板格式有误！</div><div>请按照导入模版的样式录入数据</div>`, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '重新录入',
          type: 'error',
          showCancelButton: false,
          customClass: 'top-icon-msg'
        }).then(() => {
          this.$refs.upload.clearFiles()
          this.file = null
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .warn-info {
    border:1px solid rgba(230,230,230,1);
    padding: 5px;
    border-radius: 3px;
    div {
      margin-bottom: 5px;
      &:last-child{
        margin-bottom: 0;
      }
    }
    span {
      cursor: pointer;
      color:rgba(26,132,232,1);
    }
  }
  .filter-container {
    padding: 10px 0;
  }
  .left-block {
    line-height: 32px;
  }
  .left {
    border-right: 1px solid  #E6E6E6;
  }
  .upload-wrap {
    margin-top: 20px;
  }
  .el-icon-upload {
    color: #1A84E8;
  }
</style>
